/*
 * @Author: wangqizhang
 * @Date: 2024-04-25 14:38:11
 * @LastEditors: wangqizhang
 * @LastEditTime: 2024-05-05 14:01:18
 * @FilePath: /suixinji-react/src/components/MarkDown/index.tsx
 * @Description:
 *
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved.
 */
import React from 'react';
import ReactMde from 'react-mde';
import * as Showdown from 'showdown';

import 'react-mde/lib/styles/css/react-mde-all.css';
type Props = {
  value: string;
  onChange: (value: string) => void;
};
export default class MarkdownEditor extends React.Component {
  converter: any;
  constructor(props: Props) {
    super(props);
    this.state = {
      value: 'Type some *markdown* here!',
      tab: 'write',
    };
    this.converter = new Showdown.Converter({
      tables: true,
      simplifiedAutoLink: true,
      strikethrough: true,
      tasklists: true,
    });
  }

  handleTabChange = (tab: any) => {
    this.setState({ tab });
  };

  handleValueChange = (value: any) => {
    this.props.onChange(value);
  };

  render() {
    const value = this.props.value;
    return (
      <ReactMde
        minEditorHeight={400}
        value={value}
        onTabChange={this.handleTabChange}
        onChange={this.handleValueChange}
        selectedTab={this.state.tab}
        generateMarkdownPreview={(markdown) =>
          Promise.resolve(this.converter.makeHtml(markdown))
        }
      />
    );
  }
}
